<template>
	<view class="container">
		<scroll-view scroll-y class="questions-list" @scrolltolower="loadMore">
			<view class="menus" v-if="!searchShow">
				<view class="menulist" @click="record">
					<image src="/static/wrong.png" mode=""></image>
					<view class="txt"> 做题记录 </view>
				</view>
				<view class="menulist" @click="cuoti">
					<image src="/static/edit.png" mode=""></image>
					<view class="txt"> 错题重做 </view>
				</view>
				<view class="menulist" @click="shoucang">
					<image src="/static/shouc.png" mode=""></image>
					<view class="txt"> 试题收藏 </view>
				</view>
				<view class="menulist" @click="search">
					<image src="/static/search.png" mode=""></image>
					<view class="txt"> 试题搜索 </view>
				</view>
			</view>
			<view class="search" v-if="searchShow">
				<image src="/static/ss.png" mode=""></image>
				<input type="text" placeholder="请输入搜索内容" v-model="keywords" />
				<view class="searchtxt" @click="getList"> 搜索 </view>
			</view>
			<view class="numbers">
				<view class="left"> 共 </view>
				<view class="nums"> {{ total }} </view>
				<view class="left"> 套试题 </view>
			</view>
			<view class="titles" v-if="!searchShow"> 
				<view class="solt"> </view>
				<view class="t"> 知识点练习 / 套题练习 </view>
			</view>
			<view v-if="paperList.length>0" style="padding-bottom: 40rpx;">
				<view class="list" v-for="(item, index) in paperList" :key="item.id" hover-class="bg-click" @click="answer(item)" v-if="!searchShow">
					<view class="contents">
						<view class="paper-header">
							<text class="title">{{item.title}}</text>
						</view>
						<view class="desc" v-if="item.record">
							<view class="paper-info">
								<text class="questions">已完成{{ item.record.total }}/{{ item.question_num }}</text>
							</view>
							<view class="paper-meta">
								<text class="questions">正确率{{ item.record.acu }}%</text>
							</view>
							<view v-if="item.record">
								<text class="questions">作答时间 {{ item.record.updatetime }}</text>
							</view>
						</view>
						<view class="desc" v-else>
							<view class="paper-info">
								<text class="questions">共{{item.question_num}}题</text>
							</view>
							<view class="paper-meta">
								<text class="score">总分{{item.total_score}}分</text>
							</view>
						</view>
						<view class="right">
							<image src="/static/rights.png" class="rights" mode=""></image>
						</view>
					</view>
					<view class="bottom-line">  </view>
				</view>
			</view>
			<view v-else class="nodata">暂无数据</view>
			<!-- 加载状态 -->
			<view class="loading-status">
				<text v-if="isLoading" class="loading-text">加载中...</text>
				<text v-if="!noMore" class="no-more">没有更多了~</text>
			</view>
		</scroll-view>
	</view>
	<view class="selectType" v-if="lianxiShow">
		<view class="content">
			<view class="cs" @click="kaoshi">
				<image src="/static/kaoshi.png" mode="widthFix"></image>
				<text class="txts">考试模式</text>
			</view>
			<view class="cs" @click="lianxi">
				<image src="/static/lianxi.png" mode="widthFix"></image>
				<text class="txts">练习模式</text>
			</view>
		</view>
		<view class="close">
			<image src="/static/close.png" @click="answer" mode=""></image>
		</view>
		<view class="modal"> </view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			baseURL: getApp().globalData.baseUrl,
			appid: uni.getStorageSync('appid'),
			paperList: [],
			searchShow: false,
			total: 500,
			keywords: "",
			currentPage: 1,
			noMore: false,
			isLoading: false,
			lianxiShow: false,
			items: {}
		};
	},
	onShow(){
		this.getList()
		this.lianxiShow  =  false
	},
	methods: {
		answer(item){
			this.items = item
			this.lianxiShow = !this.lianxiShow
		},
		kaoshi(){
			uni.navigateTo({url: '/pages/question/answer?id='+this.items.id+'&title='+this.items.title+'&type=1'})
		},
		lianxi(){
			uni.navigateTo({url: '/pages/question/answer?id='+this.items.id+'&title='+this.items.title+'&type=2'})
		},
		shoucang(){
			
		},
		search(){
			this.total  =  0
			this.currentPage  =  1
			this.searchShow =  !this.searchShow
		},
		getList(){
			uni.request({
				url: this.baseURL + '/api/paper/paperList',
				method: 'GET',
				data: {appid:this.appid,page:this.currentPage,keyword: this.keywords},
				header: { 'Content-Type': 'application/json' },
				success: (res) => {
					if( res.data.status == 1001 ){
						uni.showToast({ title: '账户信息已过期，请重新登录！', icon: 'none' });
						uni.setStorageSync('isLogin',false)
						uni.setStorageSync('phone','')
						uni.setStorageSync('appid','')
						setTimeout(function(){
							uni.navigateTo({url: '/pages/login/index'})
						},1000)
					}
					this.total  = res.data.data.total
					if( res.data.status == 100 ){
						this.searchShow =  false
						if (this.currentPage === 1) {
							this.paperList = res.data.data.data
						} else {
							this.paperList = [...this.paperList, ...res.data.data.data]
						}
						this.isLoading = false
						if( this.paperList.length <= res.data.data.total ){
							this.noMore = false
						} else {
							this.noMore = true
						}
					}
				},
				fail: (err) => {
					console.error('请求失败:', err);
				}
			})
		},
		loadMore() {
		  if (this.isLoading || this.noMore) return
		  this.currentPage += 1
		  this.getList()
		},
		cuoti(){
			uni.navigateTo({url: '/pages/question/cuoti'})
		},
		shoucang(){
			uni.navigateTo({url: '/pages/question/shoucang'})
		},
		record(){
			uni.navigateTo({url: '/pages/question/record'})
		},
	}
};
</script>

<style>
	.container {height: 100vh;width: 100%;background: #f2f2f2;}
	.questions-list{height: 100%;margin: 0rpx auto;}
	.menus{width: 100%;display: flex;justify-content: space-around;flex-direction: row;padding: 20rpx 0 20rpx 0;background: #fff;}
	.menulist{display: flex;flex-direction: column;justify-content: center;}
	.menulist .txt{font-size: 28rpx;text-align: center;color: #3C3C3E;}
	.menulist image{width: 80rpx;height: 80rpx;display: block;margin: 0 auto;}
	.search{background: #fff;padding: 30rpx;display: flex;flex-direction: row;position: relative;align-items: center}
	.search image{width: 40rpx;height: 40rpx;position: absolute;left: 60rpx;}
	.search input{width: 90%;margin: 0 auto;border: 1rpx solid #ebebeb;border-radius: 50rpx;height: 40rpx;line-height: 40rpx;padding: 10rpx;padding-left: 80rpx;}
	.search .searchtxt{width: 80rpx;font-size: 28rpx;color: #3C3C3E;margin-left: 10rpx;}
	.numbers{width: 100%;padding: 30rpx 0 30rpx 0;display: flex;flex-direction: row;justify-content: center;font-size: 24rpx;}
	.numbers view{margin-left: 5rpx;line-height: 40rpx;}
	.numbers .left{color: #A7A7A7;}
	.numbers .nums{color: #DA3C3A;}
	.titles{padding: 20rpx 30rpx;display: flex;flex-direction: row;align-items: center;background: #fff;}
	.solt{width: 15rpx;height: 15rpx;background: #BEBEBE;}
	.titles .t{margin-left: 10rpx;font-size: 30rpx;font-weight: bold;}
	.list{height: 110rpx;position: relative;padding-top: 10rpx;background: #fff;}
	.contents{width: 90%;margin: 0 auto;}
	.bottom-line{width: 95%;margin: 0 auto;background: #BEBEBE;height: 1rpx;position: absolute;bottom: 0;}
	.paper-header{width: 100%;}
	.paper-header .title{font-size: 28rpx;color: #81A1BE;}
	.updatetime{font-size: 24rpx;color: #B9B9B9;}
	.desc{display: flex;flex-direction: row;margin-top: 10rpx;}
	.desc view{font-size: 24rpx;color: #B9B9B9;margin-left: 10rpx;}
	.desc view:first-child{margin-left: 0rpx;}
	.right{width: 20rpx;height: 30rpx;position: absolute;right: 40rpx;top: 50rpx;}
	.right .rights{width: 20rpx;height: 30rpx;}
	.bg-click{background: #ebebeb;}
	.nodata{width: 100%;text-align: center;color: #999;padding-top: 50rpx;}
	.loading-status {text-align: center;padding: 30rpx 0;}
	.loading-text {color: #888;font-size: 28rpx;}
	.no-more {color: #ccc;font-size: 28rpx;}
	scroll-view ::-webkit-scrollbar {display: none;width: 0;height: 0;color: transparent;}
	.selectType{width: 100%;height: 100%;position: fixed;top: 0;left: 0;}
	.modal{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;opacity: .4;z-index: 2;}
	.content{width: 100%;height: 120rpx;z-index: 111;display: flex;flex-direction: row;justify-content: center;margin-top: 60%;position: relative;}
	.content image{width: 50rpx;}
	.content .cs{width: 30%;display: flex;flex-direction: column;align-items: center;background: #fff;padding-top: 20rpx;}
	.content .cs:first-child{border-top-left-radius: 10rpx;border-bottom-left-radius: 10rpx;border-right: 1rpx solid #3d3d3d;}
	.content .cs:last-child{border-top-right-radius: 10rpx;border-bottom-right-radius: 10rpx;}
	.content .txts{color: #000;font-size: 28rpx;display: block;padding: 10rpx;}
	.close{position: relative;z-index: 111;width: 100%;margin-top: 30rpx;}
	.close image{width: 40rpx;height: 40rpx;display: block;margin: 0 auto;}
</style>